<template>
  <div class="top">
    <div class="item">

      <ChatTop></ChatTop>
      <ChatInfo 
        :chatInfo = 'chat_info' 
        :is_all = "is_all" 
        @delete_one = 'delete_one' 
        v-loading="loading"
        @check_item = "check_item">
      </ChatInfo>

      <ChatBottom 
        :info = 'bottom_info' 
        :all_arr = 'temp_all_arr'
        @getPage = 'getPage' 
        @is_all = "isAll"
        :isCheck = "is_show_all_check">
      </ChatBottom>

    </div>
  </div>
</template>

<script>
import ChatTop from './chatTop'
import ChatInfo from './chatInfo'
import ChatBottom from './chatBottom'

import {chat_info} from '@/network/allMessage/chat'
import {update_chat_info} from '@/network/allMessage/chat'
export default {
  name: "messageAll",
  data() {
    return {
      chat_info:'',
      bottom_info:'',
      newPage:1,
      loading:false,
      //多选的数组
      temp_all_arr:'',
      //是否全选
      is_all:false,
      is_show_all_check:{
          num:0,//本页面共有多少数据
          checkNum:0//被选中的
      }
    }
  },
  components:{
    ChatTop,
    ChatInfo,
    ChatBottom
  },
  methods:{
    getPage(val){
      this.newPage = val
    },
    //删除一个
    delete_one(val){
      this.loading = true
      update_chat_info(val).then( res => {
        if(this.chat_info.length == 1){
              this.newPage = this.newPage -1 
          }
          chat_info(this.newPage).then(res => {
          this.bottom_info = res.data.result.pop()
          res.data.result.forEach((item,index) =>{
          //添加一个全选的标志
          res.data.result[index]['is_all']= false
          if(res.data.result[index].is_show == 1){
              res.data.result[index].is_show = true
          }else{
              res.data.result[index].is_show = false
          }
        })
          this.chat_info = res.data.result
          this.loading = false
          this.$message({
              message: '删除成功',
              type: 'success'
          })
          //console.log(this.chat_info)
        }).catch(err => {
          console.log(err)
        })

      }).catch( err => {
        console.log(err)
      })
    },
    //删除多个
    check_item(val){
      this.temp_all_arr = val
      this.is_show_all_check.checkNum = val.length
      //console.log(val)
    },
    //全选
    isAll(val){
      this.is_all = val
    }
  },
  created(){
    chat_info().then(res => {
      this.bottom_info = res.data.result.pop()
      res.data.result.forEach((item,index) =>{
          //添加一个全选的标志
          res.data.result[index]['is_all']= false
          if(res.data.result[index].is_show == 1){
              res.data.result[index].is_show = true
          }else{
              res.data.result[index].is_show = false
          }
      })
      this.chat_info = res.data.result
      this.is_show_all_check.num = this.chat_info.length
      //console.log(this.is_show_all_check)
    }).catch(err => {
      console.log(err)
    })
  },
  watch:{
    newPage(newVal){
        chat_info(newVal).then(res => {
        this.bottom_info = res.data.result.pop()
        res.data.result.forEach((item,index) =>{
          //添加一个全选的标志
          res.data.result[index]['is_all']= false
          if(res.data.result[index].is_show == 1){
              res.data.result[index].is_show = true
          }else{
              res.data.result[index].is_show = false
          }
        })
          this.chat_info = res.data.result
          this.is_show_all_check.num = this.chat_info.length
          this.temp_all_arr = []
          //console.log(this.chat_info)
        }).catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.top {
  padding: 10px;
  .item {
    background: #f5faff;
    .el-row {
      padding: 5px;
    }
    .grid-content {
      text-align: center;
    }
  }
}

</style>